<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册页面表单验证优化</title>
    <style type="text/css">
        .error{
            color: red;
            font-size: 12px;
        }
        form {
            max-width: 650px;
            margin: 0 auto;
        }

        table {
            border-collapse: collapse;
            border: 1px solid #ccc;
            width: 100%;
        }

        td {
            padding: 10px;
            font-size: 16px;
            color: #333;
            font-family: "楷体";
            text-align: center;
        }

        h2 {
            font-size: 24px;
            color: #333;
            text-align: center;
            margin-top: 20px;
        }

        
        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        input[type="text"],
        input[type="password"] {
            width: 95%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            background-color: #f7f7f7;
            transition: border-color 0.3s ease-in-out;
        }

        input[type="text"]:focus,
        input[type="password"]:focus {
            outline: none;
            border-color: #4CAF50;
        }

    </style>
    <!--导入库文件-->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/localization/messages_zh.min.js"></script>
</head>
<body>
<h2>用户注册表单</h2>
<form action="" method="post">
    <table border="1" width="600px" cellspacing="0">
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" name="uname" id="uname" />
                <!--<label id="uname-error" class="error" for="uname">dddd</label>-->
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="pwd" id="pwd" /></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="repwd" id="repwd" /></td>
        </tr>
        <tr>
            <td>邮箱：</td>
            <td><input type="text" name="email" id="email" /></td>
        </tr>
        <tr>
            <td>出生日期：</td>
            <td><input type="text" name="birthday" id="birthday" /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" name="sub" id="sub" value="提交" /></td>
        </tr>
    </table>
</form>
</body>
<script type="text/javascript">
    $("form").validate({
        //校验规则
        rules:{
            "uname":{
                required:true,
                rangelength:[3,10]
            },
            "pwd":{
                required:true,
                rangelength:[6,16]
            },
            "repwd":{
                required:true,
                rangelength:[6,16],
                equalTo:"#pwd"
            },
            "email":{
                required:true,
                email:"email"
            },
            "birthday":{
                required:true,
                dateISO:"YYYY-MM-dd"
            }
        },
        //自定义错误消息提示内容
        messages:{
            "uname":{
                required:"用户名不能为空",
                rangelength:"用户名长度必须在3-10个字符之间"
            },
            "pwd":{
                required:"密码不能为空",
                rangelength:"密码长度必须在6-16个字符之间"
            },
            "repwd":{
                required:"确认密码不能为空",
                rangelength:"密码长度必须在6-16个字符之间",
                equalTo:"两次密码不一致"
            },
            "email":{
                required:"邮箱不能为空",
                email:"邮箱格式不正确"
            },
            "birthday":{
                required:"出生日期不能为空",
                dateISO:"日期格式不正确"
            }
        },
        /*errorClass:"f",
        errorElement:"p"*/
    });
</script>
</html>